<template>
    <div class="common-layout">
        <el-container style="height: 100%">
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-header style="background-color: white;display: flex">
                <el-col :span="2" style="display: flex">

                </el-col>
                <el-col :span="3" class="imgCol">
                                        <img
                                                :src="route.query.coverUrl"
                                                class="<imag></imag>e"/>
                </el-col>
                <el-col :span="3" class="nameDiv" >

                                        <el-tag size="large"
                                                effect="plain"
                                                v-for="(item) in dynamicTags"
                                                v-if="dynamicTags.value!=null"
                                        >{{item}}
                                        </el-tag>
                </el-col>

                <el-col :span="10">
                                        <h3>{{route.query.name}}</h3>
                </el-col>
                <el-col :span="3" class="teacherDiv">
                    <router-link :to="{path:'/personspace',query:{id:course.tid}}" class="router-link">
                        <span>资料上传者：</span>
                        <span>{{route.query.tchname}}</span>
                    </router-link>
                </el-col>
                <el-col :span="2"></el-col>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <el-menu
                            class="el-menu-vertical-demo "
                            active-text-color="#42b983"
                    >
                        <router-link :to="{path:'/studyText',query:course}" class="router-link"
                                     style="text-decoration: none;">
                            <el-menu-item index="2" class="router-link">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>文档观看</span>
                            </el-menu-item>
                        </router-link>
                        <router-link :to="{path:'/commentArea',query:course}" class="router-link"
                                     style="text-decoration: none;">
                            <el-menu-item index="3" class="router-link">
                                <el-icon>
                                    <icon-menu/>
                                </el-icon>
                                <span>讨论区</span>
                            </el-menu-item>
                        </router-link>
                    </el-menu>
                </el-aside>
                <el-main class="mainDiv">
                    <div class="videoDiv">
                        <!--浏览文本的区域-->
                        <vue-office-docx
                                :src="docx"
                                @rendered="renderedHandler"
                                @error="errorHandler"
                                style="height: 100%"
                                v-show="course.textualType == 'docx'"
                        />
                        <vue-office-pdf
                                :src="pdf"
                                style="height: 100%"
                                @rendered="renderedHandler"
                                @error="errorHandler"
                                v-show="course.textualType == 'pdf'"
                        />
                    </div>
                </el-main>
                <el-aside width="350px">
                    <!--放入词云系统-->
                    <el-card class="cardClass">
                        <template #header>
                            <div class="card-header">
                                <span>本文关键词词云</span>
                            </div>
                        </template>
                        <wordCloud :course="course"></wordCloud>
                        <template #footer>Footer content</template>
                    </el-card>
                    <el-card class="cardClass">
                        <template #header>
                            <div class="card-header">
                                <span>本文摘要</span>
                            </div>
                        </template>
                        <div style="height: 30vh;overflow: auto;">
                            <p v-for="(item,index) in summaryList" :key="item" class="text item">({{index+1}}){{ item }}</p>
                        </div>

                        <template #footer>Footer content</template>
                    </el-card>
                </el-aside>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import {useRoute} from 'vue-router'
    import {ref,onMounted} from "vue";
    import wordCloud from "@/components/word-cloud";
    //docx的
    import VueOfficeDocx from '@vue-office/docx'
    import '@vue-office/docx/lib/index.css'
    //pdf的
    import VueOfficePdf from '@vue-office/pdf'
    import {getTextSummary, getWordCloud} from "@/api/textualmaterial";

    const route = useRoute();
    const course = route.query;
    // console.log(course);
    // const url = route.query.url
    const docx = ref("/"+course.url)
    const pdf = ref("/"+course.url);
    const dynamicTags = ref([])
    // console.log(dynamicTags.value)
    const commentList = ref([])
    const summaryList = ref([]);
    onMounted(()=>{
        dynamicTags.value = route.query.label.split('&')
        textSummary();
    })
    // docx作为参数通过父组件传参
    const renderedHandler=()=>{
        console.log("渲染完成")
    }
    const errorHandler=()=>{
        console.log("渲染失败")
    }

    const textSummary=()=>{
        getTextSummary({url:course.url}).then((res)=>{
            summaryList.value = res.data
        })
    }



</script>

<style scoped>
    .common-layout{
        height: 100%;
    }
    .videoDiv {
        /*display: flex;*/
        background-color: white;
        /*flex-direction: column;*/
        /*align-items: center;*/
        width: 100%;
        height: 78.5vh;
    }

    .mainDiv {
        /*margin-top: 10px;*/
        /*background-color: white;*/
    }

    .imgCol {
        display: flex;
        justify-content: space-around;
    }

    .nameDiv {
        display: flex;
        align-items: center;
    }

    .teacherDiv {
        display: flex;
        align-items: center
    }
    .el-menu-vertical-demo{
        margin-top: 20px;
        margin-left: 20px;
    }

    div > a {
        color: #2c3e50;
        text-decoration: none;
    }


    .router-link:hover {
        color: #42b983;
    }
    .cardClass{
        max-width: 480px;
        margin-top: 20px;
        height: 45%;
        margin-right: 20px;
    }
</style>